<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性 computed ???</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <h3>add: {{ add() }}</h3>
        <h3>add: {{ add() }}</h3>
       
        <h3>sub: {{ sub }}</h3>
        <h3>sub: {{ sub }}</h3>

        x: <input type="text" v-model.number="data.x"><br/>
        y: <input type="text" v-model.number="data.y"><br/>
    </div>

    <script type="module">
        import {createApp, reactive, computed} from './js/vue.esm-browser.js'

        /*
          v-text 和插值表达式完成功能一致
        */
        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                // reactive 创建响应式对象，用于存储复杂的数据类型，例如：对象、数组
                const data = reactive({
                    x: 10,
                    y: 20
                })

                // 方法：无缓存
                let add = () => {
                    console.log("add");
                    return data.x + data.y
                }

                const sub = computed(()=>{
                    console.log("sub");
                    return data.x + data.y
                })

                return {
                    title: "计算属性 computed",
                    data,
                    add,
                    sub
                }
            }
        }).mount("#app")
    </script>
</body>
</html>